<?php
session_start();
require_once('../includes/config.php');
require_once('includes/dbfunctions.php');

if (!isset($_SESSION['User'])) {
    require ("login.php");
    exit;
}

$assetList = getAllAssetsByPath();
$paths = array_keys($assetList);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert Image</title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="includes/styles.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <style type="text/css">

            .togglegroup {
                padding: 3px;
                cursor: pointer;
            }

            .toggleSelected {
                font-weight: bold;
            }

            #images p {
                float: left;
                text-align: center;
                padding: 3px;
                margin: 3px;
                border: 1px solid black;
                height: 100px;
                width: 100px;
                cursor: pointer;
                overflow: hidden;
            }

            #images p img {
                height: 75px;
                width: 100px;
                cursor: pointer;
            }
        </style>

    </head>
    <body>
        <div id="doc3" class="yui-t2">
            <div id="hd">
                <p><label for="imageurl">Enter image URL:</label><input id="imageurl" type="text" name="imageurl" />
                    <button type="submit" id="imageurlsubmit" name="imageurlsubmit">Insert</button>
                </p>
                <h3>Or select from the following uploaded images:</h3>
            </div>
            <div id="bd">
                <div id="imagecategories" class="yui-b">
                    <ul>
                    <?php
                        for ($grp = 0; $grp < sizeof($paths); $grp++) {
                            $path = $paths[$grp];
                            if (trim($path) === "") {
                                $path = "Uncategorized Images";
                            }
                            print ("<li class=\"togglegroup\" onclick=\"showImageGroup($grp)\">$path</li>\n");
                        }
                    ?>
                    </ul>
                </div>
                <div id="yui-main">
                    <div class="yui-b"><div class="yui-g">
                            <div id="images">
                            <?php
                                foreach($paths as $path) {
                                    print ("<div class=\"imagegroup\">\n");
                                    foreach ($assetList[$path] as $asset) {
                                        $assetID = $asset['ID'];
                                        $title = $asset['Title'];
                                        $desc = $asset['Description'];
                                        print ("<p>".
"<img src=\"asset.php?id=$assetID\" title=\"$desc\" alt=\"$desc\" /><br />$title</p>\n");
                                    }
                                    print ("</div>\n");
                                }
                            ?>
                            </div>
                    </div></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //<![CDATA[
            function showImageGroup(index) {
                $(".imagegroup").hide()
                $(".togglegroup").removeClass("toggleSelected");

                $(".imagegroup:eq(" + index + ")").show();
                $(".togglegroup:eq(" + index + ")").addClass("toggleSelected");
            }

            $(document).ready( function() {
                var Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event,
                myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('pageeditor');
                //Get a reference to the editor on the other page

                //Add a listener to the parent of the images
                Event.on('images', 'click', function(ev) {
                    var tar = Event.getTarget(ev);
                    //Check to see if we clicked on an image
                    if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'img')) {
                        //Focus the editor's window
                        myEditor._focusWindow();
                        //Fire the execCommand for insertimage
                        myEditor.execCommand('insertimage', tar.getAttribute('src', 2));
                        //Close this window
                        window.close();
                    }
                });

                Event.on(window, 'load', function() {
                    window.focus();
                });

                // Add a listener to the Insert button
                Event.on('imageurlsubmit', 'click', function(ev) {
                    // Get URL from text box
                    var urlInput = Dom.get('imageurl').value;
                    if (urlInput == '') {
                        return false;
                    }
                    //Focus the editor's window
                    myEditor._focusWindow();
                    //Fire the execCommand for insertimage
                    myEditor.execCommand('insertimage', urlInput);
                    //Close this window
                    window.close();
                });

            });
            showImageGroup(0);
            //]]>
        </script>

    </body>
</html>
